<!-- prettier-ignore -->
<template>
  <div class="cesium-map">
    <div id="cesiumContainer"></div>
  </div>
</template>

<script>
import {addskyLayer,removeLayer,addLayer,addLabelLayer} from '@/utils/map'
export default {
  data() {
    return {
      bottomData: null,
      terrainShow: false,
      tdtToken: "1fd463af45319bc45b394dac4a87006b",
      currentBaseMap: "默认",
      baseMaps: [],
    };
  },

  methods: {
    // 初始化地图
    createdMap() {
      this.viewer = new Cesium.Viewer("cesiumContainer", {
        contextOptions: {
          webgl: {
            alpha: true,
            depth: true,
            stencil: true,
            antialias: true,
          },
        },
        useBrowserRecommendedResolution: true,
        selectionIndicator: false,
        homeButton: false,
        animation: false, //是否显示动画控件
        baseLayerPicker: false, //是否显示图层选择控件
        geocoder: false, //是否显示地名查找控件
        timeline: false, //是否显示时间线控件
        sceneModePicker: false, //是否显示投影方式控件
        navigationHelpButton: false, //是否显示帮助信息控件
        infoBox: false, //是否显示点击要素之后显示的信息
        imageryProvider: false,
        fullscreenButton: false,
        shouldAnimate: true,
        requestRenderMode: true,
      });
      this.viewer.scene.primitives.destroyPrimitives = false;
      this.viewer.scene.postProcessStages._fxaa.enabled = true;
      this.viewer.scene.screenSpaceCameraController.enableCollisionDetection = true;
      this.viewer._cesiumWidget._creditContainer.style.display = "none";
      this.viewer.screenSpaceEventHandler.removeInputAction(
        Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK
      );

      //指北针
      let options = {};
      // 用于在使用重置导航重置地图视图时设置默认视图控制。接受的值是Cesium.Cartographic 和 Cesium.Rectangle.
      options.defaultResetView = Cesium.Rectangle.fromDegrees(80, 22, 130, 50);
      // 用于启用或禁用罗盘。true是启用罗盘，false是禁用罗盘。默认值为true。如果将选项设置为false，则罗盘将不会添加到地图中。
      options.enableCompass = true;
      // 用于启用或禁用缩放控件。true是启用，false是禁用。默认值为true。如果将选项设置为false，则缩放控件将不会添加到地图中。
      options.enableZoomControls = false;
      // 用于启用或禁用距离图例。true是启用，false是禁用。默认值为true。如果将选项设置为false，距离图例将不会添加到地图中。
      options.enableDistanceLegend = false;
      // 用于启用或禁用指南针外环。true是启用，false是禁用。默认值为true。如果将选项设置为false，则该环将可见但无效。
      options.enableCompassOuterRing = true;
      CesiumNavigation.umd(this.viewer, options);
      this.Global.viewer = this.viewer

      this.defaultImageLayer = addskyLayer(this.viewer, 'http://{s}.tianditu.gov.cn/img_c/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=1fd463af45319bc45b394dac4a87006b');
      this.initBaseMap()
      this.$emit('mapFinish')
    },

    initBaseMap(){
      this.hgBaseLayer = addLayer(this.viewer,window.baseMapUrl)
      this.hgBaseLabel = addLabelLayer(this.viewer,window.baseLabelUrl)
    }
  },

  created() {
  },

  async mounted() {
    this.createdMap();
    this.defaultImageLayer = null
    this.hgBaseLayer = null
    this.hgBaseLabel = null
  },

  beforeDestroy() {
    removeLayer(this.viewer,this.defaultImageLayer)
    removeLayer(this.viewer,this.hgBaseLayer)
    removeLayer(this.viewer,this.hgBaseLabel)
    this.handler && this.handler.destroy();
    this.handler = null;
    this.viewer && this.viewer.destroy()
    this.viewer = null
  },
};
</script>

<style lang="less" scoped>
.cesium-map,
#cesiumContainer {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 10;
}

.cesium-map {
  .bottom-map-switch {
    position: absolute;
    bottom: 30px;
    right: 0;
    z-index: 11;
    border-radius: 2px;
    color: #70a0d6;
  }
  .bottom-control {
    position: fixed;
    bottom: 0;
    display: flex;
    align-items: center;
    width: 100%;
    height: 30px;
    padding: 0 30px;
    box-sizing: border-box;
    background-color: #333333;
    z-index: 11;

    span {
      margin-right: 30px;
      font-size: 10px;
      color: #e6e6e6;
    }
  }
}
</style>

<style lang="less">
.compass {
  top: 30px;
  right: 20px;

  .compass-rotation-marker,
  .compass-outer-ring {
    width: 90%;
    height: 90%;
  }

  .compass-outer-ring {
    background: url(~@/assets/images/map/zhibeizhen.png) no-repeat;
    background-size: 100% 100%;
  }

  .compass-outer-ring-background,
  .compass-gyro-background,
  .compass-gyro {
    display: none;
  }
}

.cesium-performanceDisplay-defaultContainer {
  display: none !important;
}
</style>
